<template>
  <div class="module_ data_module">
    <div class="flex-justify-end">
      <el-button class="mr8" size="medium" type="primary" @click="active = 'edit'" v-if="active === 'view'">编辑</el-button>
      <div v-else>
        <el-button class="mr8" size="medium" type="primary" @click="save">保存</el-button>
        <el-button class="mr8" size="medium" type="primary" @click="active = 'view'" >返回</el-button>
      </div>
    </div>
    <component :is="choseComp" :info=info ref="comp"></component>

  </div>
</template>

<script>
import viewInfo from '../components/view.vue'
import editInfo from '../components/edit.vue'
import {Apiemployeedetails,ApiemployeedetailsPut } from "@/api"
import {mapMutations} from 'vuex'
import {uploadUrl} from '@/api/request'
import {isPhone,isIDCard} from '@/utils/test'
export default {
  components:{
    viewInfo,
    editInfo
  },
  computed:{
    choseComp(){
      return this.choseInfo[this.active]
    }
  },
  data(){
    return{
      active: 'view',
      choseInfo: {
        view: viewInfo,
        edit: editInfo
      },
      employees_id: this.$store.state.userInfo.employees_id,
      info:{
        department: {},
        employee: {}
      }
    }
  },
  mounted(){
    this.getInfo()
  },
  methods:{
    ...mapMutations(['changeUserInfo']),
    getInfo(){
      Apiemployeedetails(this.employees_id).then(({data}) =>{
        if(data.image) data.image = uploadUrl() + data.image
        this.info = data
      })
    },
    save(){
      const options = this.$refs.comp.item
      const files = this.$refs.comp.imgFiles
      if(!options.name){
        this.$message.error('请输入人员名称')
        return 
      }
      // isPhone,isIDCard
      if(options.phone && !isPhone(options.phone)){
        this.$message.error('请输入正确手机号')
        return 
      }
      if(options.card_no && !isIDCard(options.card_no)){
        this.$message.error('请输入正确身份证号')
        return 
      }
      // if(!options.belong_department_id){
      //   this.$message.error('请选择所属科室')
      //   return 
      // }
      const formData = new FormData()
      for (const key in options) {
        if(key === 'image' && files){
          formData.append('image',files)
        }else{
          formData.append(key,options[key])
        }
      }
      ApiemployeedetailsPut(formData,this.employees_id,{
                headers:{'Content-Type':'multipart/form-data'}
            }).then(res => {
        this.active = 'view'
        this.getInfo()
        this.$message.success('个人资料修改成果')
        this.changeUserInfo({
          name:options.name,
        })
      })
    }
  }

}
</script>

<style lang='less'>
.data_module{
  tr{
    td{
      height: 50px;
      box-sizing: border-box;
    }
    .key_name{
      width: 200px;
    }
    .key_value{
      width: 300px;
    }
  }
  .logo_img{
    width: 162px;
    height: 240px;
    .image-slot{
      height: 100%;
      width: 100%;
      img{
        height: 100%;
        width: 100%;
      }
    }
  }
  .table_{
    width: 80%;
    margin: 0 auto;
  }
  .title{
    width: 80%;
    min-width: 589.5px;
    height: 45px;
    margin: 0 auto;
    background: rgb(237, 237, 238);
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

</style>